<template>
  <div class="timing">
    <el-row style="margin-bottom:10px;">
      <el-col :span="24">
        <el-form :inline="true" :model="formInline" class="demo-form-inline queryFrom">
          <el-form-item label="模型名称">
            <el-input v-model="formInline.dataModelName" clearable placeholder="请输入模型名称" />
          </el-form-item>
          <el-form-item>
            <el-button plain @click="getUserList"><Icon type="ios-search" />查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!-- 按钮 -->
    <el-row style="margin-bottom:10px;">
      <el-col :span="24">
        <el-button type="primary" @click="addUser('add')"><Icon type="md-add" />创建模型</el-button>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <ykhttb ref="httbRef" width="160" 
    :btn-is-show="btnIsShow" :table-col="tabUserList" 
    :table-data="tableUserData" 
    @deleteSelectData="deleteSelectData" 
    @refresh="getUserList" />
    <!-- 分页 -->
    <div style="text-align:right;margin-top:10px;">
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog :close-on-click-modal="false" :title="title" width="50%" :visible.sync="dialogTableVisible">
      <!-- 名称和路径必输 -->
      <el-form v-if="dialogTableVisible" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm autoClass">
        <el-form-item label="模型名称" prop="dataModelName">
          <el-input v-model="ruleForm.dataModelName" clearable placeholder="" />
        </el-form-item>
        <el-form-item label="模型类型" prop="dataModelTypeId">
          <el-select v-model="ruleForm.dataModelTypeId" clearable placeholder="请选择">
            <el-option
              v-for="(item,i) in dataModuleTypeList"
              :key="i"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label-width="0px" style="width:100%;margin-top: 20px;">
          <div  style="max-height: 300px;overflow-y: scroll;">
            <div v-for="(item,index) in fields" :key="index" class="addPs">
              <div style="display: flex;">
                <label style="display: inline-block;width: 100px;text-align: right;padding-right: 10px;"><span style="color:red;">*</span> 字段名称</label>
                <div style="display: inline-block;flex:1;">
                  <el-input v-model="item.fieldName" clearable placeholder="" style="display: inline-block;" />
                </div>
              </div>
              <div style="display: flex;">
                <label style="display: inline-block;width: 100px;text-align: right;padding-right: 10px;"><span style="color:red;">*</span>中文名称</label>
                <div style="display: inline-block;flex:1;">
                  <el-input v-model="item.fieldCnName" clearable placeholder="" style="display: inline-block;" />
                </div>
              </div>
              <div style="display: flex;">
                <label style="display: inline-block;width: 100px;text-align: right;padding-right: 10px;"><span style="color:red;">*</span>字段类型</label>
                <div style="display: inline-block;flex:1;">
                  <el-select v-model="item.fieldTypeNum" @change="setValFun(item)" clearable placeholder="请选择">
                    <el-option
                      v-for="(item,i) in fieldTypeList"
                      :key="i"
                      :label="item.name"
                      :value="item.num"
                    />
                  </el-select>
                </div>
              </div>
              <el-button v-if="index==0" type="primary" @click="addListFun"> <i style="font-size: 12px;" class="el-icon-circle-plus-outline" /> </el-button>
              <el-button v-if="index!=0" type="danger" @click="reduceListFun(index)"> <i style="font-size: 12px;" class="el-icon-remove-outline" /> </el-button>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="示例" style="width: 100%;">
          <vueJsonEditor v-model="txt" @has-error="jsonchange" @json-change = "jsonchange" />
          <p v-if="isDisable" style="color: red;">格式有误</p>
        </el-form-item>
      </el-form>
      <div style="text-align: center;">
        <el-button type="primary" :disabled="isDisable" @click="submitForm('ruleForm')">确定</el-button>
        <el-button @click="resetForm('return')">返回</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { dataModeltypegetList,dataModeldatagetList, 
  dataModeldatasaveOne, dataModeldataupdateById, 
  dataModeldatadeleteByIds,codequery } from '@/api/zt/index'
import experiment from '@/mixins/experiment'
import vueJsonEditor from 'vue-json-editor'
// import '@/styles/jsoneditor.css' // 该本地文件用于覆盖编辑器默认的样式

export default {
  components: {
    vueJsonEditor
  },
  mixins: [experiment],
  data() {
    return {
      dataModuleTypeList:[],
      txt:"",
      btnIsShow: {
        operate: true,
        detile: false,
        del: true
      },
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      title: '新增',
      rules: {
        dataModelName: [
            { required: true, message: '请输入模型名称', trigger: 'change' }
        ],
        dataModelTypeId: [
            { required: true, message: '请选择模型类型', trigger: 'change' }
        ]
      },
      dialogTableVisible: false,
      fields: [
          {
            "fieldCnName": "",
            "fieldName": "",
            "fieldTypeNum": '',
            "fieldType": ""
          }
        ],
      ruleForm: {
        "dataModelName": "",
        "remark": "",
        "examples": {},
        "dataModelTypeId": '',
        "dataModelTypeName": ""
      },
      userId: '',
      formInline: {
        'dataModelName': '',
        'dataModelTypeId': ''
      },
      addParms: [],
      addParms2: [],
      tableUserData: [],
      tabUserList: [
        {
          key: 'dataModelName',
          title: '模型名称'
        },
        {
          key: 'dataModelTypeName',
          title: '模型类型'
        },
        {
          key: 'createTime',
          title: '创建时间'
        }
      ],
      fieldTypeList:[],
      total: 0,
      size: 10,
      page: 1
    }
  },
  created() {

  },
  mounted() {
    this.$nextTick(() => {
      dataModeltypegetList({
        'pageIndex':1,
        'name': '',
        'pageSize': 1000
      }).then(res => {
        this.dataModuleTypeList = res.data.records
      })
      codequery({'type': 'fieldType'}).then(res => {
        this.fieldTypeList = res.data.records
      })
      this.getUserList()
    })
  },
  methods: {
    setValFun(v){
      this.fieldTypeList.forEach((item,index)=>{
        if(v.fieldTypeNum == item.num){
          v.fieldType = item.name
        }
      })
    },
    reduceListFun(i) {
      const a = JSON.parse(JSON.stringify(this.fields))
      a.splice(i, 1)
      this.fields = JSON.parse(JSON.stringify(a))
    },
    addListFun() {
      this.fields.push({
         "fieldCnName": "",
        "fieldName": "",
        "fieldTypeNum": '',
        "fieldType": ""})
    },
    deleteSelectData(v) {
      const ids = [{ id: v.id }]
      dataModeldatadeleteByIds(ids).then(res => {
        if (res.code == 200) {
          this.getUserList()
        } else {
          this.errorDialog(res.msg)
        }
      })
    },
    deleteParams(i) {
      const a = JSON.parse(JSON.stringify(this.addParms))
      a.splice(i, 1)
      this.addParms = JSON.parse(JSON.stringify(a))
    },
    deleteParams2(i) {
      const a = JSON.parse(JSON.stringify(this.addParms2))
      a.splice(i, 1)
      this.addParms2 = JSON.parse(JSON.stringify(a))
    },
    addParamsFun() {
      this.addParms.push({ key1: '', key2: '', key3: '' })
    },
    addParamsFun2() {
      this.addParms2.push({ key1: '', key2: '' })
    },
    handleNodeClick(data) {
      console.log(data)
    },
    resetDatav(){
      this.fields = [{
        "fieldCnName": "",
        "fieldName": "",
        "fieldTypeNum":'',
        "fieldType": ""
      }]
      this.txt = ''
    },
    commitFromData() {
      let a  = JSON.parse(JSON.stringify(this.ruleForm))
        a.fields = JSON.parse(JSON.stringify(this.fields))
        a.examples = JSON.parse(JSON.stringify(this.txt))||{}
        this.dataModuleTypeList.forEach((item,index)=>{
          if(item.id==this.ruleForm.dataModelTypeId){
            a.dataModelTypeName = item.name
          }
        })
      if(!this.inspectformdat(a.fields)){//返回false监测不通过
        return
      }
      if (this.ruleForm.hasOwnProperty('id')) {
        dataModeldataupdateById(a).then(res => {
          if (res.code == 200) {
            this.getUserList()
          } else {
            this.errorDialog(res.msg)
          }
         this.resetDatav()
        })
      } else {
        dataModeldatasaveOne(a).then(res => {
          if (res.code == 200) {
            this.getUserList()
          } else {
            this.errorDialog(res.msg)
          }
          this.resetDatav()
        })
      }
    },
    handleSizeChange(v) {
      this.page = 1
      this.size = v
      this.getUserList()
    },
    handleCurrentChange(v) {
      this.page = v
      this.getUserList()
    },

    // 获取用户列表
    getUserList() {
      this.dialogTableVisible = false
      this.$refs.httbRef.isShowLoading(true)
      dataModeldatagetList({
        'pageIndex': this.page,
        'dataModelName': this.formInline.dataModelName,
        'dataModelTypeId': this.formInline.dataModelTypeId,
        'pageSize': this.size
      }).then(res => {
        this.tableUserData = res.data.records
        this.total = res.data.total
        this.$refs.httbRef.isShowLoading(false)
      })
    }
  }
}
</script>

    <style lang="scss" scoped>
  @import "~@/assets/styles/auto.scss";

    >>>.jsoneditor-poweredBy {
      display: none !important;
    }

    .addPs{
      display: flex;
      flex-direction: row;
      margin-bottom: 10px;
      >div{
        width:32%
      }
      span{
        display: inline-block;
        width: 10%;
      }
    }
    .autoClass{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      .el-form-item{
        width:50%;
      }
    }
    
    .addcs{
      display: flex;
      flex-direction: row;
      margin-bottom: 10px;
    }
    .addcs2 .el-select {
      display: inline-block;
      width: 240px;
    }
    .autoInput{
      display: inline-block;
      width: 70%;
    }
    .infoTitle{
      border-bottom:1px solid #e5e5e5;
      margin-bottom: 30px;
      position: relative;
    }
    .infoTitle>span{
      position: absolute;
      left: 20px;
      background: #fff;
      width:80px;
      top:-15px;
      height:30px;
      text-align: center;
      line-height: 30px;
    }
      .el-select{
         width:100%;
      }
      .timing{
        background:#fff;
        padding:20px;
      }
    </style>
